// 1、导入 React 第三方包
import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

// 列表渲染

// 1 列表数据
const books = ['React', 'Vue', 'Angular'];

// 2 列表UI
const books1 = [<li>React</li>, <li>Vue</li>, <li>Angular</li>];

// 问题 books => books1
// 数组格式转换 map
const books2 = books.map((item, index) => <li key={index}>{item + 1}</li>);

// 3 渲染的UI
const el = <div>{books2}</div>;
const el2 = (
  <div>
    {books.map((item, index) => (
      <li key={index}>{item + 1}</li>
    ))}
  </div>
);

root.render(el2);
